<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>手机数据分析实训三</title>
    <script type="text/javascript" src="/static/js/jquery.min.js"></script>
    <script type="text/javascript" src="/static/js/echarts.min.js"></script>
</head>
<style>
html , body , .content {
    width:100%;
    height:100%;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    background-color: #ccc;
}
.content {
    padding: 40px;
}
.header {
    height: 10%;
    width: 100%;
    font-size: 24px;
    font-weight: 700;
    line-height: 60px;
    text-align: center;
}
.body {
    height: 100%;
    width: 100%;
    text-align: center;
}
.chartBox {
    width: 100%;
    height: 80%;
    margin-bottom:40px;
}
</style>
<body>
    <div class="content">
        <div class="header">手机数据分析实训三</div>
        <div class="body">
            <div class="chartBox" id="cpuChart"></div>
            <div class="chartBox" id="ramChart"></div>
            <div class="chartBox" id="romChart"></div>
            <div class="chartBox" id="osChart"></div>
        </div>
    </div>
</body>
<script>
//方法调用
drawCpuChart();
drawRamChart();
drawRomChart();
drawOsChart();


//手机CPU型号销售量统计

function drawCpuChart(){
    // 基于准备好的dom，初始化echarts实例
    var cpuChart = echarts.init(document.getElementById('cpuChart'));

    // 指定图表的配置项和数据
    var cpuOption = {
        title : {
            text: '手机CPU型号销售量统计',
        },
        tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        series : [
            {
                name: '手机CPU型号销售量',
                type: 'pie',
                radius : '55%',
                center: ['50%', '60%'],
                data:[
                     {% for r in tscc_res %}{ value : {{r.fld_sale_count}},name : "{{r.fld_cpu_name}}"  },{% endfor %}
                ]
            }
        ]
    };

    // 使用刚指定的配置项和数据显示图表。
    cpuChart.setOption(cpuOption);
}


//手机RAM销售量统计

function drawRamChart(){
    // 基于准备好的dom，初始化echarts实例
    var ramChart = echarts.init(document.getElementById('ramChart'));

    // 指定图表的配置项和数据
    var ramOption = {
        title: {
            text: '手机RAM销售量统计'
        },
        tooltip: {},
        legend: {
            data:['销量']
        },
        xAxis: {
            data: [{% for r in tsrac_res %} "{{r.fld_ram_name}}" ,{% endfor %}]
        },
        yAxis: {},
        series: [{
            name: '销量',
            type: 'bar',
            data: [{% for r in tsrac_res %} {{r.fld_sale_count}} , {% endfor %}]
        }]
    };

    // 使用刚指定的配置项和数据显示图表。
    ramChart.setOption(ramOption);
}


//手机ROM销售量统计

function drawRomChart(){
    // 基于准备好的dom，初始化echarts实例
    var romChart = echarts.init(document.getElementById('romChart'));

    // 指定图表的配置项和数据
    var romOption = {
        title: {
            text: '手机ROM销售量统计'
        },
        tooltip: {},
        legend: {
            data:['销量']
        },
        xAxis: {
            data: [{% for r in tsroc_res %} "{{r.fld_rom_name}}"  , {% endfor %}]
        },
        yAxis: {},
        series: [{
            name: '销量',
            type: 'line',
            data: [{% for r in tsroc_res %} {{r.fld_sale_count}}  , {% endfor %}]
        }]
    };

    // 使用刚指定的配置项和数据显示图表。
    romChart.setOption(romOption);
}


//手机操作系统销售量统计

function drawOsChart(){
    // 基于准备好的dom，初始化echarts实例
    var osChart = echarts.init(document.getElementById('osChart'));

    // 指定图表的配置项和数据
    var osOption = {
        title : {
            text: '手机操作系统销售量统计',
        },
        tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        series : [
            {
                name: '手机操作系统销售量',
                type: 'pie',
                radius : '55%',
                center: ['50%', '60%'],
                data:[
                    {% for r in tsoc_res %}{ value : {{r.fld_sale_count}},name : "{{r.fld_os_name}}"  },{% endfor %}
                ]
            }
        ]
    };

    // 使用刚指定的配置项和数据显示图表。
    osChart.setOption(osOption);
}


</script>
<script type="text/javascript" src="/static/js/index.js"></script>
</html>